<!--
 * @Author: lixb
 * @Date: 2020-08-21 17:55:24
 * @LastEditTime: 2020-09-18 17:20:15
 * @Descripttion: 表格组件，包括分页；
-->
<template>
  <div>
    <el-table
      ref="multipleTable"
      :data="tableData"
      :max-height="tableHeight"
      stripe
      style="width: 100%;margin-bottom: 20px;"
      @selection-change="handleSelectionChange"
    >
      <el-table-column v-if="tableIndex" label="序号" type="index" width="50"></el-table-column>
      <el-table-column v-if="isShowSelection" type="selection" width="50"></el-table-column>
      <template v-for="item in propData">
        <el-table-column
          v-if="!item.type"
          :key="item.id"
          :width="item.width"
          :prop="item.prop"
          align="center"
          :label="item.label"
        >
          <template slot-scope="{ row, column }">
            <!-- 这里可以自定义添加所需要的固定模板类型
              例如： <div v-if="item.type == 'img'"><img src="xxx.xxx.com" /><div/>
              只需要在传入的数组item项中添加一个类型  type: img 
             -->
            <!-- <div v-if="item.type == 'sex'">{{ row.sex == 1 ? '男' : '女' }}</div> -->
            <div>{{ row[column.property] || '-' }}</div>
          </template>
        </el-table-column>
        <template v-else>
          <!-- 自定义插槽 -->
          <slot :name="item.type"></slot>
        </template>
      </template>
    </el-table>
    <div v-if="Object.keys(pagingData).length > 0" class="paging">
      <el-pagination
        background
        :current-page="pagingData.current"
        :page-sizes="[10, 20, 50, 100]"
        :pager-count="5"
        :page-size="pagingData.size"
        :layout="layout"
        :total="pagingData.total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      ></el-pagination>
    </div>
  </div>
</template>

<script>
  export default {
    props: {
      //表格是否是单选
      isRadioTable: {
        type: Boolean,
        default() {
          return false;
        },
      },
      tableIndex: {
        type: Boolean,
        default() {
          return false;
        },
      },
      /**
       * @Author: lixb
       * @Date: 2020-08-24 10:57:34
       * @msg: 表格主体数据；格式例：
       * [{
            name: '李四',
            sex: 1,
            age: 22,
            url: '@/assets/img1.jpg',
            adress: '深圳市南山区茶光村',
          },
          {
            name: '张三',
            sex: 2,
            age: 32,
            url:
              'https://dss3.baidu.com/-rVXeDTa2gU2pMbgoY3K/it/u=1189779147,4248115718&fm=202&mola=new&crop=v1',
            adress: '深圳市南山西丽',
          }]
       */
      tableData: {
        type: Array,
        default() {
          return [];
        },
      },
      /**
       * @Author: lixb
       * @Date: 2020-08-24 10:42:09
       * @msg: 表头的数据；格式例：
       * [{
            prop: 'number',
            label: '工号',
          },
          {
            prop: 'name',
            label: '姓名',
          },
          {
            prop: 'department',
            label: '部门',
          }]
       */
      propData: {
        type: Array,
        required: true,
      },
      /**
       * @Author: lixb
       * @Date: 2020-08-24 11:02:52
       * @msg: 分页数据，传入一个对象；传入一个空对象不展示分页
       */
      pagingData: {
        type: Object,
        default() {
          return {};
        },
      },
      /**
       * @Author: lixb
       * @Date: 2020-08-24 13:01:13
       * @msg: 表格的高度，传值： 字符串800px；默认值500px;如果不想限制高度就传null值或者不传值；
       */
      tableHeight: {
        type: String,
        default() {
          return '500px';
        },
      },
      layout: {
        type: String,
        default() {
          return 'total, prev, pager, next, jumper';
        },
      },
      isShowSelection: {
        type: Boolean,
        default() {
          return false;
        },
      },
    },
    data() {
      return {};
    },
    watch: {},
    methods: {
      handleSelectionChange(val) {
        if (val.length > 1) {
          if (this.isRadioTable) {
            this.$refs.multipleTable.clearSelection();
            this.$refs.multipleTable.toggleRowSelection(val.pop());
          }
        }
        this.$emit('selectionChange', val);
      },
      handleSizeChange(val) {
        let pageObj = this.pagingData;
        pageObj.size = val;
        this.$emit('getTableList', pageObj);
      },
      handleCurrentChange(val) {
        let pageObj = this.pagingData;
        pageObj.current = val;
        this.$emit('getTableList', pageObj);
      },
    },
  };
</script>

<style scoped>
  .paging {
    width: 450px;
    margin: auto;
  }
</style>
